<template>
    <div class="forget-password">
        <Header/>

        <div class="wrapper">
            <div class="step-box">
                <div class="step" :class="{active: step > 0, cur: step == 1}">
                    <div>1</div>
                    <p>Verification Email</p>
                </div>
                <div class="line" :class="{full: step > 1}"></div>
                <div class="step" :class="{active: step > 1, cur: step == 2}">
                    <div>2</div>
                    <p>Reset Password</p>
                </div>
                <div class="line" :class="{full: step > 2}"></div>
                <div class="step" :class="{active: step > 2, cur: step == 3}">
                    <div>3</div>
                    <p>Result Notification</p>
                </div>
            </div>
            <div class="form-box emailform-box" @keyup.enter="getEmailCode" v-show="step == 1">
                <h2>Please enter your email</h2>
                <el-form ref="emailForm" :model="emailForm" :rules="emailRules" @submit.native.prevent>
                    <el-form-item label="" prop="email">
                        <el-input v-model.trim="emailForm.email" placeholder="Please enter your email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="sendLoading" type="primary" @click.prevent="getEmailCode">Get the Verification Code</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-box passform-box" @keyup.enter="submitForm" v-show="step == 2">
                <h2>Verification code has been sent to your mailbox</h2>
                <el-form ref="passForm" :model="passForm" :rules="passRules">
                    <el-form-item label="" prop="code">
                        <el-input class="code" v-model.trim="passForm.code" placeholder="Enter your verification code" autocomplete="off"></el-input>
                        <div class="getcode disabled" v-if="countNumber">
                            <span>{{ countNumber + 's' }}</span>
                        </div>
                        <el-button class="getcode" :loading="sendLoading" type="primary" @click.prevent="getEmailCode" v-else>Verification Code</el-button>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input type="password" v-model.trim="passForm.password" placeholder="Please enter the new password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="confirmpassword">
                        <el-input type="password" v-model.trim="passForm.confirmpassword" placeholder="Please enter the new password again" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click.prevent="submitForm">Enter</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="done" v-show="step == 3">
                <i class="el-icon-success"></i>
                <p>Password Reset Successful!</p>
                <p class="jump">Automatically jump back to login page after 3s!</p>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/Header'

    export default {
        name: 'ForgetPassword',
        components: {
            Header
        },
        data() {
            // 密码验证
            const checkPass = (rule, value, callback) => {
                const reg = /^\w{6,18}$/

                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (!reg.test(value)) {
                    callback('The password is a combination of 6-18 bits of letters, numbers and underscores. The letters are case-sensitive.')
                } else {
                    if (this.passForm.confirmpassword !== '') {
                        this.$refs.passForm.validateField('confirmpassword')
                    }
                    callback()
                }
            }
            // 确认密码验证
            const confirmCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (value !== this.passForm.password) {
                    callback(new Error('Two inconsistent passwords!'))
                } else {
                    callback()
                }
            }
            
            return {
                loading: false,
                sendLoading: false,
                emailForm: {
                    email: ''
                },
                passForm: {
                    code: '',
                    password: '',
                    confirmpassword: '',
                },
                passRules: {
                    code: [
                        {required: true, message: 'Verification code cannot be empty!', trigger: 'blur'}
                    ],
                    password: [
                        {validator: checkPass, trigger: 'blur'}
                    ],
                    confirmpassword: [
                        {validator: confirmCheckPass, trigger: 'blur'}
                    ]
                },
                emailRules: {
                    email: [
                        {required: true, message: 'Mailbox cannot be empty!', trigger: 'blur'},
                        {type: 'email', message: 'Mailbox format is wrong!', trigger: 'blur'}
                    ]
                },
                countNumber: 0,
                step: 1
            }
        },
        created() {
            document.body.style.background = '#F0F2F5'
        },
        methods: {
            // 获取邮箱验证码
            getEmailCode() {
                this.$refs.emailForm.validate(async valid => {
                    if (!valid) return

                    this.sendLoading = true

                    const res = await this.axios.get(`/ForeignLogin/ForgetPassword?email=${this.emailForm.email}`)

                    if (res.code == 1) {
                        if (this.step != 2) this.step = 2
                        this.countDown(180)
                    } else if (res.code == 0 || res.code == 2 || res.code == 3) {
                        this.$message.error('Send failed!')
                    } else if (res.code == 4) {
                        this.$message.error('Mailbox does not exist!')
                    }

                    this.sendLoading = false
                })
            },
            // 验证码倒计时
            countDown(second) {
                this.countNumber = second

                const timer = setInterval(() => {
                    this.countNumber--

                    if (this.countNumber <= 0) {
                        this.countNumber = 0
                        clearInterval(timer)
                    }
                }, 1000)
            },
            // 修改密码
            submitForm() {
                this.$refs.passForm.validate(async valid => {
                    if (!valid) return

                    this.loading = true

                    const res = await this.axios.get(`/ForeignLogin/Changepassword?email=${this.emailForm.email}&newpassword1=${this.passForm.password}&newpassword2=${this.passForm.confirmpassword}&code=${this.passForm.code}`)

                    this.loading = false

                    if (res.code == 1) {
                        this.step = 3

                        setTimeout(() => {
                            this.$router.push('/login')
                        }, 3000)
                    } else if (res.code == 0 || res.code == 2 || res.code == 3) {
                        this.$message.error('Modification failed!')
                    } else if (res.code == 4) {
                        this.$message.error('Verification code incorrect!')
                    } else if (res.code == 6) {
                        this.$message.error('Mailbox does not exist!')
                    }
                })
            }
        },
        destroyed() {
            document.body.style.background = '#fff'
        }
    }
</script>

<style>
    .forget-password .el-input__inner {font-size: 16px; height: 48px;}
    .forget-password .el-form-item__error {white-space: nowrap;}
</style>

<style scoped>
    .wrapper {background: #fff; margin: 24px auto; overflow: hidden;}
    .step-box {text-align: center; font-size: 0; margin: 74px auto;}
    .step-box > * {display: inline-block; vertical-align: middle; position: relative;}
    .line {width: 174px; height: 2px; background: #D8D8D8; margin: 0 16px;}
    .line.full {background: #4D84FC;}
    .step div {width: 34px; height: 34px; background: #CECECE; border-radius: 17px; font-size: 15px; color: #fff; text-align: center; line-height: 34px;}
    .step p {font-size: 18px; color: #9B9B9B; position: absolute; white-space: nowrap; top: 40px; left: 50%; transform: translateX(-50%);}
    .step.active div {background: #4D84FC;}
    .step.cur p {color: #000;}

    .emailform-box {margin: 100px auto;}
    .form-box {width: 378px;}
    h2 {font-size: 23px; text-align: center; margin-bottom: 22px;}
    
    .el-button {width: 378px; height: 50px; font-size: 16px; background: #4D84FC; border-radius: 3px; box-shadow: 0 0 12px #4D84FC;}

    .passform-box {margin: 0 auto 80px;}
    .passform-box h2 {text-align: left;}

    .code {width: 292px;}
    .getcode {width: 80px; height: 48px; float: right; cursor: pointer; background: #4D84FC; text-align: center; border-radius: 4px; position: relative; box-shadow: none; padding: 0; font-size: 12px; font-weight: normal; white-space: normal; line-height: 14px;}
    .getcode span {position: absolute; top: 50%; left: 50%; font-size: 12px; line-height: 16px; color: #fff; transform: translate(-50%, -50%);}
    .getcode.disabled {background: #CECECE; cursor: default;}
    .done {text-align: center; margin-bottom: 70px;}
    .done i {font-size: 80px; color: #7ED321; margin: 15px auto;}
    .done p {font-size: 23px; color: #000;}
    .done .jump {font-size: 14px; color: #f00;}
</style>